<template>
  <div class="company-info"
       v-loading="loading" element-loading-text="加载公司信息中~"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row class="company-title">
      <el-row class="company-title-content" type="flex">
        <el-col style="display: flex;flex-flow: column;justify-content: center">
          <el-row type="flex" :gutter="20">
            <el-col :span="4">
              <el-image style="height: 80px;width: 80px;border-radius: 10px" shape="square" :src="logoUrl"></el-image>
            </el-col>
            <el-col style="color: white;display: flex;flex-flow: column;">
              <el-row style="font-weight: 600;font-size: 28px">
                {{ companyVo.company }}
                <el-image style="width: 22px;height: 22px"
                          :src="require('@/assets/images/company_auth.png')"></el-image>
              </el-row>
              <el-row style="margin-top: 14px;font-weight: 400;font-size: 15px">{{ companyVo.address }} &nbsp;·&nbsp;
                {{ companyVo.scale }}
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex;flex-flow: column;align-items: flex-end;">
            <div>
              <el-image style="width: 100px;height: 100px;margin-right: 67px;margin-top: 25px"
                        :src="require('@/assets/images/company_frontend.png')"></el-image>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
    <el-card class="company-photos" shadow="never">
      <el-page-header style="margin-bottom: 15px" @back="$router.go(-1)" content="公司图片"></el-page-header>
      <div v-if="companyVo.photos.length !== 0">
        <el-carousel :interval="5000" type="card">
          <el-carousel-item v-for="photo in companyVo.photos" :key="photo.id"
                            style="display: flex;justify-content: center;align-items: center">
            <el-image fit="contain" style="width: 100%" :src="photoUrl(photo)"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-empty v-else description="该公司尚未添加图片"></el-empty>
    </el-card>
    <el-row class="company-content" type="flex">
      <el-col class="company-content-leftPart">
        <el-row>
          <el-card style="border-radius: 15px" shadow="never">
            <el-row type="flex">
              <el-col style="margin-top: 5px" :span="3">搜索条件</el-col>
              <el-col>
                <el-form class="form" :model="conditions" ref="queryForm" size="small" :inline="true">
                  <el-row type="flex" :gutter="20">
                    <el-form-item>
                      <el-cascader
                          placeholder="请选择公司城市"
                          clearable
                          :options="city"
                          :show-all-levels="false"
                          v-model="conditions.job_address"
                      ></el-cascader>
                    </el-form-item>
                    <el-form-item>
                      <el-select v-model="conditions.job_experience" clearable placeholder="请选择经验要求">
                        <el-option v-for="item in experienceOptions" :key="item.value" :label="item.label"
                                   :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-select v-model="conditions.job_education" clearable placeholder="请选择教育程度">
                        <el-option v-for="item in degreeOptions" :key="item.value" :label="item.label"
                                   :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-select v-model="conditions.job_type" clearable placeholder="请选择招聘类型">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                   :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-row>
                  <el-row type="flex" :gutter="20">
                    <el-form-item>
                      <el-input v-model="conditions.job_price_up" placeholder="请输入薪资下限" style="width: 182px"
                                clearable/>
                    </el-form-item>
                    <el-form-item>
                      <el-input v-model="conditions.job_price_down" placeholder="请输入薪资上限" style="width: 182px"
                                clearable/>
                    </el-form-item>
                    <el-form-item>
                      <el-input v-model="conditions.job_name" placeholder="请输入工作名称" style="width: 182px"
                                clearable/>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                          icon="el-icon-refresh"
                          style="width: 86px"
                          @click="reset"
                          plain>
                        重置
                      </el-button>
                      <el-button
                          icon="el-icon-search"
                          type="primary"
                          style="width: 86px"
                          @click="query"
                          plain>
                        搜索
                      </el-button>
                    </el-form-item>
                  </el-row>
                </el-form>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-card style="border-radius: 15px" shadow="never">
            <el-row>职位列表</el-row>
            <el-row class="company-career-div" v-loading="career_list_loading">
              <el-card class="company-career-card" v-if="companyVo.jobs.length !== 0" v-for="job in companyVo.jobs" :key="job.id" shadow="hover">
                <el-row type="flex" justify="space-between">
                  <el-col>
                    <router-link class="link" :to="{name: 'Info', query: {id: job.id}}">{{ job.job_name }}</router-link>
                  </el-col>
                  <el-col :span="2" style="color: red">{{ job.job_price / 1000 }}k</el-col>
                </el-row>
                <el-row type="flex" style="margin-top: 10px">
                  <el-tag size="mini" type="info">{{ job.job_address }}</el-tag>
                  <el-tag size="mini" type="info" style="margin-left: 10px">{{ job.job_education }}</el-tag>
                  <el-tag size="mini" type="info" style="margin-left: 10px">{{ job.job_experience }}</el-tag>
                  <el-tag size="mini" type="info" style="margin-left: 10px">{{ job.job_type }}</el-tag>
                </el-row>
              </el-card>
              <el-empty style="margin: auto" v-if="companyVo.jobs.length === 0" description="该公司尚未发布职位"></el-empty>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page.sync="conditions.currentPage"
                  :page-size="conditions.size"
                  layout="total, prev, pager, next"
                  background
                  :total="companyVo.count">
              </el-pagination>
            </el-row>
          </el-card>
        </el-row>
      </el-col>
      <el-col class="company-content-rightPart">
        <el-card style="border-radius: 15px" shadow="hover">
          <div slot="header">其他信息</div>
          <el-row type="flex">
            <el-col :span="4"><i class="el-icon-user-solid"></i></el-col>
            <el-col>{{ companyVo.principal }}</el-col>
          </el-row>
          <el-row type="flex" style="margin-top: 8px">
            <el-col :span="4"><i class="el-icon-date"></i></el-col>
            <el-col>{{ msToDate(companyVo.start_time).withoutTime }}</el-col>
          </el-row>
        </el-card>
        <el-image class="photo" :src="require('@/assets/images/zs.png')"></el-image>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {msToDate} from "@/utils/format";

export default {
  name: "FirmInfo",
  data() {
    return {
      loading: false,
      career_list_loading: false,
      server: window.application.minio_host,
      companyVo: {
        logo: "",
        photos: [],
        jobs: [],
        count: 0,
      },
      conditions: {
        company: this.$route.query.name,
        job_name: '',
        job_price_up: '',
        job_price_down: '',
        job_address: '',
        job_education: '',
        job_experience: '',
        job_type: '',
        size: 10,
        currentPage: 1
      },
      degreeOptions: [{
        value: '硕士',
        label: '硕士'
      }, {
        value: '本科',
        label: '本科'
      }, {
        value: '专科',
        label: '专科'
      }, {
        value: '无要求',
        label: '无要求'
      }],
      experienceOptions: [{
        value: "在校生",
        label: "在校生"
      }, {
        value: "应届生",
        label: "应届生"
      }, {
        value: "经验不限",
        label: "经验不限"
      }, {
        value: "1年以内",
        label: "1年以内"
      }, {
        value: "1-3年",
        label: "1-3年"
      }, {
        value: "3-5年",
        label: "3-5年"
      }, {
        value: "5-10年",
        label: "5-10年"
      }, {
        value: "10年以上",
        label: "10年以上"
      }],
      typeOptions: [{
        value: '全职',
        label: '全职'
      }, {
        value: '兼职',
        label: '兼职'
      }],
    }
  },
  mounted() {
    this.getVo()
  },
  computed: {
    ...mapGetters(['city']),
    logoUrl() {
      return this.server + this.companyVo.logo
    }
  },
  methods: {
    msToDate,
    photoUrl(photo) {
      return this.server + photo.bucket + "/" + photo.location
    },
    getVo() {
      this.loading = true
      this.$store.dispatch("company/getCompanyVo", this.conditions.company)
          .then((resp) => {
            this.companyVo = resp
          }).catch((error) => {
        this.$message.error(error)
      }).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 1500)
      })
    },
    handleCurrentChange(val) {
      this.conditions.currentPage = val
      this.query()
    },
    reset() {
      this.conditions = {
        company: this.$route.query.name,
        job_name: '',
        job_price_up: '',
        job_price_down: '',
        job_address: '',
        job_education: '',
        job_experience: '',
        job_type: '',
        size: 10,
        currentPage: 1
      }
      this.query()
    },
    query() {
      this.career_list_loading = true
      if (this.conditions.job_address.length === 2) this.conditions.job_address = this.conditions.job_address[1]
      this.$store.dispatch('career/likeQueryByName', this.conditions)
          .then((resp) => {
            this.companyVo.jobs = resp.data.records
            this.companyVo.count = resp.data.total
            setTimeout(() => {
              this.career_list_loading = false
            }, 1500)
          })
    }
  }
}
</script>

<style scoped lang="css">

.company-info {
  background: linear-gradient(to bottom, #dfeef1, 1%, white);
  min-height: 900px;
}

.company-title {
  width: 100%;
  height: 155px;
  min-width: 1200px;
  min-height: 155px;
  background: linear-gradient(to right, #3d5169, #38596c);
}

.company-title-content {
  width: 1180px;
  min-width: 1180px;
  height: 100%;
  margin: auto;
}

.company-photos {
  width: 1184px;
  min-width: 1184px;
  height: 390px;
  min-height: 390px;
  margin: 17px auto;
  border-radius: 15px;
}

.company-content {
  width: 1184px;
  min-width: 1184px;
  margin: 15px auto;
}

.company-content-leftPart {
  width: 884px;
  min-width: 884px;
}

.company-content-rightPart {
  width: 284px;
  min-width: 284px;
  margin-left: 16px;
}

.company-content-rightPart ::v-deep .el-card__header {
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
}

.company-career-div {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.company-career-div .company-career-card:nth-child(2n+2) {
  margin-left: 20px;
}

.company-career-card {
  width: 410px;
  min-width: 410px;
  height: 95px;
  min-height: 95px;
  margin-bottom: 20px;
  border-radius: 15px;
}

.link {
  text-decoration: none;
  color: black;
}

.link:hover {
  color: #28b8b8;
}

.photo {
  border-radius: 15px;
  margin-top: 20px;
}
</style>
